webpack常用指令大解析~

1.新建文件
打开demo的终端=> mkdir src （在demo文件夹下新建src文件）

2.初始化环境，生成package.json文件
demo终端下=> npm init -y

3.下载webpack(局部)
=> cnpm/npm i webpack webpack-cli --save

4.webpack普通打包
=> 普通打包 npx webpack ./src/index.js -o ./dist/bundle.js

=> 开发环境打包 npx webpack ./src/index.js -o ./dist/bundle.js --mode=development

=> 生产环境打包 npx webpack ./src/index.js -o ./dist/bundle.js --mode=production

打包src文件下Index.js及里面所有的依赖 生成到dist的bundle.js文件里
加上mode以及development就是开发环境下打包
普通打包和生产环境是完全压缩，开发环境不会有任何的压缩
webpack仅自带解析js和json文件

5.用webpack.config.js配置打包
在demo中新建webpack.config.js文件↓↓↓

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

tip:
1.从nodejs中引入path方法,这样出口文件output可以自动识别当前目录
2.filename为生成文件名，路径是当前路径的dist文件下

=》demo终端输入webpack 就可以自动打包

6.解析并打包css文件
先下载包 npm i css-loader style-loader
在webpack.config.js中写入

module: {
rules: [{
test: /\.css$/,
use: ["style-loader", "css-loader"
//use数组里的顺序是自下而上，逆序执行的
//css-loader是将css转化成js，style-loader是将转化的js插入style标签里
]}]}

7.利用插件plugin以空html生成自动引入bundle.js的html文件

先下载包npm i html-webpack-plugin

let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })]}

会在dist文件夹下 自动生成bundle.js和index.html文件（以src下index.html为模板）