webpack学习记录

sinbad18065
190 阅读2分钟

npm init -y

安装

-npm i webpack webpack-cli -D

npx

比如要使用webpack命令打包，你可以使用全局安装，也可以本地目录安装。当在本地目录安装你需要使用webpack命令，可以使用以下方法：

  • 全局安装webpack webpack-cli
  • 使用npm scripts方式
  • cd进入node_modules/.bin/目录下，执行webpack
  • 将 node_modules 的可执行目录加到 PATH 中
  • 有了npx命令，就不需要以上方法了，可以直接执行npx webpack xxx
  • 如果没有对应的命令，npx还会自动安装，然后执行，然后删除

https://segmentfault.com/a/1190000012974903

entry output

entry可以是字符串，字符串数组或者一个对象

entry: './src/base.js'
entry: ['./src/base.js', './src/index.js']
entry: { // 放置多个就会成为多入口
    index: './src/index.js',
    base: './src/base.js'
}

output是一个对象，必须要有filename和path属性

output: {
    path: path.join(__dirname, 'dist'),//输出的文件夹，只能是绝对路径 
    //filename是entry名字main,hash根据打包后的文件内容计算出来的一个hash值
    filename: '[name].[hash].js' //打包后的文件名
},

多入口配置

loader

loader用于对文件的预处理。例如

rules: [
    {
        test: require.resolve('jquery'),
        use: {
            loader: 'expose-loader',
            options: '$'
        }
    },
    {
         test: /\.css$/,//转换文件的匹配正则
         //css-loader用来解析处理CSS文件中的url路径,要把CSS文件变成一个模块
         //style-loader 可以把CSS文件变成style标签插入head中
         //多个loader是有顺序要求的，从右往左写，因为转换的时候是从右往左转换
         loader: ["style-loader", "css-loader"]
    // }
]
加载loader的三种方式
  • 配置，如上所示
  • 内联
    rquire('style-loader!css-loader!./index.css')

babel

babel是一个平台，解析它们靠的是下面的映射

npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D
babel-core babel-loader 核心包
babel-preset-env es6
babel-preset-stage-0 es7
babel-preset-react react

plugins

常用插件

/*loader*/
css-loader style-loader
expose-loader
/*plugin*/
html-webpack-plugin // 根据模板生成html文件
clean-webpack-plugin
new webpack.ProvidePlugin({ // 这个相当于在每个entry文件中打包进去jquery模块，并且赋值给局部变量$
    $: 'jquery'
}),
webpack-dev-server

优化

tree-shaking

源码解析

  • http://taobaofed.org/blog/2016/09/09/webpack-flow/
avatar
文章
阅读
粉丝