webpack学习笔记

一.文件说明

package.json：npm的配置文件

webpack.config.js：webpack的配置文件

二.打包命令

你可以这样执行webpack 命令进行打包

//1.直接编译从一个路径到另一个路径
webpack src/index.js dist/index.js

//2.配置webpack.config.js文件，然后执行webpack --config webpack.config.js命令
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

//3.在配置了webpack.config.js的前提下，在package.json文件的scripts对象中添加以下代码，然后执行npm run build。
"scripts": {
  "build": "webpack"
}

三.通过loader在js中引入css文件

1.安装style-loader和css-loader

npm install --save-dev style-loader css-loader

2.在webpack.config.js中添加和output统计的module对象，具体代码如下：

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

3.然后在js文件中引入

import './style,css' //你的css样式路径

注:     test：通过正则匹配.css结尾的文件，use：使用了style-loader和css-loader

四.多入口设置

在webpack.config.js中设置

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

两个入口app和print，输出的文件名就是[入口].bundle.js，即app.bundle.js和print.bundle.js。

五.HtmlWebpackPlugin和CleanWebpackPlugin插件

1.HtmlWebpackPlugin生成新的html文件到dist

2.CleanWebpackPlugin每次生成新的文件之前清理旧文件

六.开发

1.source map:程序报错了？webpack打包了几个js文件，找不到错误代码的原始位置？

在webpack.config.js文件中配置和entry同级的devtool对象

devtool: 'inline-source-map',

2.webpack-dev-server:每次修改文件我都要运行npm run build吗？

当然不需要，可以用webpack-dev-server监听，它为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)，

(1)安装

npm install --save-dev webpack-dev-server

(2)告诉服务器，在哪里查找文件

在webpack.config.js文件中添加entry同级的devServer对象，表示在dist目录下获取访问文件

devServer: {
    contentBase: './dist'
},

(3)修改npm scripts

在package.json文件的scripts对象中添加运行webpack-dev-server的命令。

"start": "webpack-dev-server --open"

(4)运行

npm start

现在修改文件，网页就会自动获取修改后的内容。不用重复npm run build，不用重复刷新网页。爽不爽？

七.模块热替换

它允许在运行时更新各种模块，而无需进行完全刷新。

 

未写完，待完善

转载于:https://my.oschina.net/wyc1219/blog/1506718