webpack项目搭建

1、新建一个文件目录，命令行进入当前目录，输入npm init 创建package.json文件

2、安装项目依赖webpack模块： npm install webpack --save-dev

3、新建如下图目录结构

　　

4、在根目录下新建文件：webpack.config.js   并编辑如下代码：

module.exports = {
　　devtool: 'eval-source-map',
    entry: {
        main: './src/js/main.js',
        home: './src/js/home.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    },
}

5、安装webpack脚手架（webpack-cli模块）和html-webpack-plugin 和 html-loader（多页面加载）插件：npm install webpack-cli   html-webpack-plugin　

　　继续编辑webpack.config.js文件（引入path模块）

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    devtool: 'eval-source-map',
    entry: {
        main: './src/js/main.js',
        home: './src/js/home.js'
    },
    output: {
        filename: 'js/[name].js',
        path: __dirname + '/dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename : 'index.html',//入口html
            template : './src/page/index.html',
            minify : {
                // removeComments:true,   //删除注释
                // collapseWhitespace: true      //删除空格，压缩
            },
            chunks: ['main']  //对应entry的入口js.这样可以按需加载js
        }),
        new HtmlWebpackPlugin({
            filename : 'home.html',
            template : './src/page/home.html',
            minify : {
                // removeComments:true,   //删除注释
                // collapseWhitespace: true      //删除空格，压缩
            },
            chunks: ['home']
        }),
    ],
    devServer: {
        host : '127.0.0.1',
        port : 8080 ,
        inline : true,
        open :true,   //自动打开浏览器
        hot : false,   //慎用！打开热更新，会导致修改样式可能不支持。关闭热更新，页面会强刷
        contentBase : path.join(__dirname, "dist"),
    }
}

6、为了方便启动webpack，在package.json中加入代码

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reason",
    "dev": "node_modules/.bin/webpack --mode development",
    "start": "node_modules/.bin/webpack-dev-server --open"
  },

7、使用babel-loader转化ES6代码

　　安装依赖：

npm install --save-dev babel-core babel-preset-es2015
npm install --save-dev babel-loader@7　　/*babel-core 6的版本得安装babel-loader 7*/

　　编辑webpack.config.js文件

    module: {
        loaders: [{
            test: /\.js$/,
            use: 'babel-loader'
        }]
    } 

　　创建babel调用的文件.babelrc

{ "presets": [ "es2015" ] }

8、css和scss的处理模块

　　安装依赖

npm install style-loader css-loader sass-loader

//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

　　编辑webpack.config.js文件

    module: {
        rules: [{
                test: /\.js$/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },

9、图片处理模块

　　安装依赖

npm install url-loader image-webpack-loader --save-dev　　

　　编辑webpack.config.js文件

　　　　{
            test: /\.(png|jpg|gif|svg)$/, use: [
                {
                    loader: 'url-loader', //此处使用url-loader可进行base64，使用file-loader不能
                    options: {
                        limit: 20000,
                        name: 'image/[name]-[hash:5].[ext]',
                    }
                },
                { loader: 'image-webpack-loader' }  //image-webpack-loader 的作用是对图片进行压缩
            ]
        },

　　注意：在html 引用图片使用以下方式

<img src="${require('../image/3.jpg')}" alt="">

10、出现webpack-dev-server报错，删除node_modules模块，在运行npm install

11、完整代码参考

　　webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    devtool: 'eval-source-map',
    entry: {
        main: './src/js/main.js',
        home: './src/js/home.js'
    },
    output: {
        filename: 'js/[name].js',
        path: __dirname + '/dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',//入口html
            template: './src/page/index.html',
            minify: {
                // removeComments:true,   //删除注释
                // collapseWhitespace: true      //删除空格，压缩
            },
            chunks: ['main']  //对应entry的入口js.这样可以按需加载js
        }),
        new HtmlWebpackPlugin({
            filename: 'home.html',
            template: './src/page/home.html',
            minify: {
                // removeComments:true,   //删除注释
                // collapseWhitespace: true      //删除空格，压缩
            },
            chunks: ['home']
        }),
    ],
    module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader']
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
            test: /\.(png|jpg|gif|svg)$/, use: [
                {
                    loader: 'url-loader', //此处使用url-loader可进行base64，使用file-loader不能
                    options: {
                        limit: 20000,
                        name: 'image/[name].[ext]',
                    }
                },
                { loader: 'image-webpack-loader' }  //image-webpack-loader 的作用是对图片进行压缩
            ]
        },
        ]
    },
    devServer: {
        host: '127.0.0.1',
        port: 8080,
        inline: true,
        open: true,   //自动打开浏览器
        hot: false,   //慎用！打开热更新，会导致修改样式可能不支持。关闭热更新，页面会强刷
        contentBase: path.join(__dirname, "dist"),
    }
}

11、完整项目：https://github.com/huangguohua96/webpack.git