webpack4的学习笔记

1、 node.js的安装搭建（这个自行百度），查看node是否安装成功命令：node -v
2、 创建项目文件夹
3、 命令：npm init 生成一个package.json文件
在npm init的时候会出现需要一些填写的内容，最后一步 is this OK?这步就填 yes 就行了

4、 创建dist和src目录，src下创建css和js目录，放置css和js文件，css目录创建index.css文件，js目录创建index.js文件。dist创建index.html
5、 安装webpack相关插件
npm install webpack
npm install webpack-cli
npm install webpack-dev-server --save-dev
安装css打包配置loader加载器
npm install --save-dev style-loader css-loader
安装js打包配置expose-loader
npm install jquery --save-dev
npm install expose-loader --save-dev
6、 在package.json中添加webpack编译脚本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config=webpack.config.js --watch",	//主要还是改这2个
    "start": "webpack-dev-server"	//主要还是改这2个
  }

watch是每次项目修改的时候自动检测，不必在打包（npm run build）一次,直接刷新页面即可
7、 在根目录下创建webpack.config.js文件，文件名必须是webpack.config

const path = require('path');//处理路径信息
const config = {
    mode:'development', // development || production
    entry:path.resolve(__dirname,'./src/js/index.js'),//webpack 打包入口文件
    output:{
        path:path.resolve(__dirname,'./dist'),//打包完成放置位置
        filename:'main.js'//打包后的文件名，这个可以随便取名
    },
    module:{//例如如何解读css,图片如何转换，压缩等
        rules:[
            {
                test:'/\.js$/', //匹配所有的js文件
                exclude:/node_modules/,//除了node_modules以外
            },
            {
                test:/\.css$/,  //正则选中是css的文件
                loader:'style-loader!css-loader'    //如果都是css文件的话，都会加载这个模块
            },
            {
                test: require.resolve('jquery'), //require.resolve 用来获取模块的绝对路径
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            }
        ]
    },
    //插件，用于生产模板和各项功能
    plugins:[],
    //配置webpack开发服务器功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'./dist/'),
        //服务器的ip地址 可以使用ip也可以使用localhost
        host:'localhost',
        //服务器压缩是否开启
        compress:true,
        //配置服务端口号，端口号可自行修改
        port:9999
    }
}
module.exports = config

8、 index.html需要引入打包后的js文件名，打包后的js文件名放在dist里，也就是和index.html是同级文件，直接
在index.js里要写上 import ‘…/css/index.css’ var $=require(‘jquery’) 引入css和全局使用jq
9、 开始打包，命令 npm run build
打包成功后

10、 将项目部署到服务端（配置development环境下的调试服务）
在第一步的时候已经安装了webpack-dev-server，而且在第七步的时候也配置好了devServer，如果打包也没问题的话，直接使用命令npm run start
成功的话如下，http://localhost:9999/ 就是访问目标

在学习的过程中也遇到了许多问题
1、在未修改scripts的时候（也就是这2个"build": “webpack --config=webpack.config.js”, “start”: “webpack-dev-server”），跟视频学使用的打包命令是webpack js/a.js js/bundle.js，这个会报错，如下图

后来网上查了一下，是webpack4.0以上的打包命令webpack js/a.js js/bundle.js会报错和警告，改成npx webpack js/a.js -o js/bundle.js --mode development 就行了（ js/a.js为要打包的文件， js/bundle.js为打包后的文件。打包成功后会出现打包后的文件。）。现在修改了scripts，直接使用npm run build就简单的多了

2、在webpack.config.js中，webpack4.0以上module用的是rules，而不是loaders

3、index.html不能和webpack.config.js放在同级下，需要放在dist下，访问http://localhost:9999/的时候就可以直接显示出来，不然会显示如下图的情况

ps：目前学习的进度就这样吧，以后工作有用到的话在继续更新

最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！