webpack使用笔记(一)

创建package.json文件

  在主目录下使用`npm init`命令创建`package.json`文件，一路回车就OK

安装依赖

 在主目录下使用`npm install ** --save-dev`安装**依赖，例如，本例中将要安装`webpack,stylus，`等等，安装完依赖后，`package.json`文件中的`devDependencies`内容为

{
  "name": "learnwebpack",
  "version": "1.0.0",
  "description": "learnwebpack",
  "main": "index.js",
  "scripts": {},
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-latest": "^6.24.1",
    "css-loader": "^0.28.4",
    "cssnano": "^3.10.0",
    "ejs-loader": "^0.3.0",
    "express": "^4.15.3",
    "file-loader": "^0.11.2",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "image-loader": "0.0.1",
    "image-webpack-loader": "^3.3.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.4",
    "postcss-import": "^10.0.0",
    "postcss-loader": "^2.0.5",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.18.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.5.0",
    "webpack-hot-middleware": "^2.18.0"
  }
}

添加目录

• 添加 webpack的配置webpack.config.js
• 模板html文件index.html
• 资源文件夹src

整个文件的目录如下：

配置webpack.config.js文件

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
function resolve(pathname) {
    return path.join(__dirname, pathname);
}
module.exports = {
    entry:'./src/app.js',//主入口文件
    output: {
        path: resolve('dist'),//输出目录，所有资源的输出目录
        filename: 'js/[name].bundle.js',//这里app.js输出为dist/js下的app.bundle.js
    },
    module:{//不同文件的配置详情
        rules:[
            {
                test:/\.html$/,//HTML文件的加载器为'html-loader'
                loader:'html-loader'
            },
            {
                test:/\.(png|jpg|gif|svg)$/,
                loaders:[//图片的加载器首先是image-webpack-loader，其次是url-loader，limit=20000说明在图片小于20KB时将其转换我base64编码，输出图片在dist/assets下，命名为name+3位hash值+后缀
                    'url-loader?limit=20000&name=assets/[name][hash:3].[ext]',
                    'image-webpack-loader'
                ],
            },
            {
            //.tpl文件用ejs模板编写，因此用'ejs-loader'加载
                test:/\.tpl$/,
                loader:'ejs-loader'
            },
            {
            //js文件用babel编译
                test:/\.js$/,
                loader:'babel-loader',
                query:{
                    presets:['latest']
                },
                exclude:resolve('/node-modules/'),
                include:resolve('/src/')

            },

            {
            //less文件首先用'less-loader'解析，再用'postcss-loader'进行auto-prefixer,再用'css-loader'添加css文件到HTML文件中，最后用'style-loader'将其渲染到页面中。
                test:/\.less$/,
                use:[
                    {
                        loader:'style-loader'
                    },
                    {
                        loader:'css-loader',
                        options:{
                            importLoaders:1
                        }
                    },
                    {
                        loader:'postcss-loader',
                        options: {           // 如果没有options这个选项将会报错 No PostCSS Config found
                            plugins: (loader) => [
                                require('postcss-import')({root: loader.resourcePath}),//处理@import引入的文件
                                require('autoprefixer')(), //CSS浏览器兼容
                                require('cssnano')()  //压缩css
                            ]
                        }
                    },
                    {
                        loader:'less-loader'
                    }
                ],
            },
            {
                test:/\.styl$/,
                use:[
                    {
                        loader:'style-loader'
                    },
                    {
                        loader:'css-loader',
                        options:{
                            importLoaders:1
                        }
                    },
                    {
                        loader:'postcss-loader',
                        options: {           // 如果没有options这个选项将会报错 No PostCSS Config found
                            plugins: (loader) => [
                                require('postcss-import')({root: loader.resourcePath}),//处理@import引入的文件
                                require('autoprefixer')(), //CSS浏览器兼容
                                require('cssnano')()  //压缩css
                            ]
                        }
                    },
                    {
                        loader:'stylus-loader'
                    }
                ]
            },
            {
                test:/\.css$/,
                use:[
                    {
                        loader:'style-loader'
                    },
                    {
                        loader:'css-loader',
                        options:{
                            importLoaders:1
                        }
                    },
                    {
                        loader:'postcss-loader',
                        options: {           // 如果没有options这个选项将会报错 No PostCSS Config found
                            plugins: (loader) => [
                                require('postcss-import')({root: loader.resourcePath}),//处理@import引入的文件
                                require('autoprefixer')(), //CSS浏览器兼容
                                require('cssnano')()  //压缩css
                            ]
                        }
                    }
                ],
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',//上下文就是根目录
            filename: 'index.html',//在dist目录下输出为index.html
            inject: 'body',//将js文件append到body中
        })
    ]
};

完善package.json文件

添加package.json中script的运行文件，即webpack

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js --progress --display-reasons --display-modules --colors"
  },

此时在主目录下运行npm run webpack即可。