webpack中用到的命令

1.安装webpack（全局，最新版本）

npm install webpack

 

2.安装webpack-cli（开发版本）

npm install webpack-cli -D

 

3.初始化node

npm init -y

 

4.安装jquery

 npm i jquery

 

5.安装webpack-dev-server （开发版本）

 npm i webpack-dev-server -D

 

6.运行测试

 npm run build

 

7.配置webpack-dev-server

方法一

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack-dev-server --open --port 3000 --contentBase  src --hot",
}

方法二：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build2": "webpack-dev-server --open --port 3000 --contentBase  src --hot",
     "build": "webpack-dev-server"
},

在webpack.config.js中配置
let webpack = require('webpack'); // 启动热更新的第二步

devServer: { // 这里配置dev-server命令的参数的第二种形式，相对来说，这个用的比较少，也比较麻烦
    // webpack-dev-server --open --port 3000 --contentBase  src --hot
    open: true, // 自动打开浏览器
    port: 3000, // 设置端口号
    contentBase: 'src', // 指定打开目录
    hot: true // 热更新 第一步
}，
plugins: [ // 配置插件的节点，数组，plugins需要配置很多的插件
    new webpack.HotModuleReplacementPlugin(), // 第三部，new一个热更新的模块对象
],

 

8.引入css

为什么需要安装css.loader？

因为webpack打包的时候，默认只能识别.js后缀的文件，其他的文件都不能识别

npm install style-loader css-loader -D

配置

module.exports = {
            module: { // 这个地方，用来配置，配置所有的第三方模块，加载器
                rules: [{
                    test: /\.css$/, // 匹配所有的css文件
                    use: ['style-loader', 'css-loader'] // 匹配处理.css文件的第三方的loader
                }]
            }
        }

 

9.安装less.loader

npm install less-loader less --save-dev

 

10.安装img的loader

npm install url-loader --save-dev

 

11.小技巧命令

npm i

如果项目中没有node-modules文件夹，可以使用npm i一件安装所有的需要的包，前提是package.json的文件中有用的所有的包的版本和信息