webpack配置

webpack 使用流程

1.创建文件目录

+ direaction
    - dist
    - src
        + css
        + js
        + images
        + index.html
        + main.js

2.初始化项目

1
npm init -y

| 文件目录
+ direaction
    - dist
    - src
        + css
        + js
        + images
        + index.html
        + main.js
    - package.json

3.基本配置文件 webpack.config.js

1
2
3
4
5
6
7
module.exports = {
    entry: './src/main.js',
    output: {
        path: './dist',
        filename: 'bundle.js'
    }
}

4.webpack-dev-server使用

npm i webpack-dev-server -D //安装到本地开发依赖

• 这里打包我遇到了一个错误哈，配置文件中打包输出目录改为absolute path才OK。
• 由于不是全局安装的 webpack-dev-server, 所以需在 package.json文件中 scripts添加 "dev": "webpack-dev-server"
• 注意： webpack-dev-server 需要本地 webpack 依赖

//自动打开 端口 根路径  热加载
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]

5.loader 加载器

• css cnpm i style-loader css-loader -D module: { rules: [ {test: /\.css$/, use: ['style-loader', 'css-loader']}, ] }
• less cnpm i less-loader -D {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
• sass cnpm i sass-loader -D
  • 提示需要 node-sass, sass, fibers 依赖 使用 npm 装 node-sass 会失败，需要用cnpm cnpm i sass-loader node-sass sass fibers -D
  • 1.x版本 webpack use:[‘style’, ‘css’, ‘less’], 不带loader
• url //为了解决css中url问题 background: url(../a.jpg) cnpm i url-loader file-loader -D //url-loader 依赖于 file-loader {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader'}
• ECMAScript 6
  • 第一套包 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
  • 第二套包 cnpm i babel-preset-env babel-preset-stage-0 -D
  • 配置config//exclude 排除node_modules目录，否则webpack 会把目录下的js也打包，耗CPU和内存 {test: /\.js$/, use: 'babel-loader', exclude: '/node_modules/'}
  • 根目录 创建 .babelrc 配置文件，文件为 JSON 格式，不能写注释，必须用双引号{ "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] }