携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

多js文件分离

目前index.html和login.html同时引用了main.js，main.js对应 src/index.js,该文件同时引用了index.html和login.html的依赖资源，这样会导致src/index.js随项目规模扩大越来越臃肿，要解决这个需要指定Index.html和 login.html分别引用不同的js文件，这就需要在webpack配置多入口

1.修改Indexjs和创建Login.js

2.在index.js和login.js分别引入各自需要的css文件

3.在webpack配置多入口文件，这样打包后就会生成index.js和login.js

entry: {
        index: './src/index.js',
        login: './src/login.js'
    },

4.生成Index.js和login.js后，怎么加载到对应的html文件那？这里就需要再html-webpack-plugin中配置另外一个参数：chunks，这个chunks指定了打包后的html文件，去加载哪个打包后的js文件

new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            filename: 'login.html',
            template: './src/login.html',
            chunks: ['login']
        }),

5.重新执行 npm run build，看下效果,就会生成两个html和js文件，并且index.html中引入的是index.js，login.html引入的是Login.js

开发模式配置+自动拷贝配置

现在在html中修改代码，并不会立即生效，需要重新 npm run build后，才会生效。

这个开发模式，会很浪费时间，效率很低下。

这个时候我们可以用到webpack中的webpack-dev-server来帮助我们执行打包，这样我们就可以立马看到效果了

首先来安装下webpac-dev-server

npm install -D webpack-dev-server

然后在webpack.config.js中进行配置

static：表示去监听哪个目录
compres: true，表示开启压缩
port: 表示自定义的端口号
hot: true 表示热更新

devServer: {
        static: {
            directory: path.join(__dirname,'dist')
        },
        compress: true,
        port: 9000,
        hot: true
    },

接着我们在package.json中配置一个start命令

"start": "webpack-dev-server"

我们执行 npm run start后，当在源码中修改的时候，就可以直接看到效果了。

这个时候打包访问页面，会出现图片404的问题

这是因为打包后的图片路径不对

这个时候我们需要将图片路径修改下，我们不可能每次打包后都去修改图片路径

这个时候可以使用webpack提供的一个插件copy-webpack-plugin来帮助我们自动拷贝

首先安装下copy-webpack-plugin

npm install --save-dev copy-webpack-plugin

然后在webpack.config.js中进行配置

 new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname,'./src/img'),
                    to: path.resolve(__dirname,'./dist/img')
                }
            ]
        })

这样重新 npm start后就没有问题了。

webpack进行项目优化(1)

多js文件分离

开发模式配置+自动拷贝配置