webpack4常用命令及配置

推荐 webpack4.x 从入门到精通

命令

–save-dev

cnpm i webpack webpack-cli css-loader style-loader mini-css-extract-plugin file-loader html-withimg-loader html-webpack-plugin clean-webpack-plugin webpack-dev-server babel-loader @babel/core babel-preset-env extract-text-webpack-plugin url-loader

• 初始化配置文件：

npm init

• 安装webpack

cnpm i webpack webpack-cli -D

• 安装css依赖

cnpm i css-loader style-loader -D

• 安装sass 依赖

cnpm i sass-loader -D
cnpm i node-sass -D

• css 抽离

cnpm i mini-css-extract-plugin -D

• 加载图片

cnpm install file-loader -D

• 图片src引入

cnpm install html-withimg-loader -D

• web 服务器

cnpm i --D  webpack-dev-server

• 打包html

cnpm i html-webpack-plugin -D

• 清除打包后内容

cnpm i clean-webpack-plugin -D

• babel 安装

cnpm i babel-loader @babel/core babel-preset-env -D 

babel-polyfill 来提供低版本浏览器中的不支持API

cnpm install  babel-polyfill -D

–save

cnpm i expose-loader jquery -S

• 非script标签的形式安装jquery

//先安装加载器expose-loader，用于将插件暴露到全局中供其他模块使用:
cnpm i expose-loader -S
//安装JQuery:
cnpm i jquery -S

配置

输出路径

output:{
	path: path.resolve(__dirname, 'dist')，
	filename : [name].[chunkhash:5].js
}

模块

module: {
   rules: [
        {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
        {
            test: /\.(jpg|png|svg|gif)$/,
            loader: 'url-loader',
            options: {
                name: "[name]-[hash:5].min.[ext]",
            }
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)/,
            use: [
                'file-loader'
            ]
        },
        {
            test: /.html$/, //所有html结尾的文件添加此 loader 处理
            use: ["html-withimg-loader"]
        },
         {
             test: /\.js$/,
             exclude: /node_modules/, 
             loader: "babel-loader"
         }
    ]
}

运行服务

  devServer:{
        contentBase:path.resolve(__dirname,'dist'),
        host:'localhost',
        compress:true,
        port:8888
    }

package.json 中运行

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },
 "babel":{
    "presets": ["env"]
   }