webpack 学习记录 (一)

• 安装webpack

sudo cnpm install webpack -g

• 安装webpack-cli

sudo cnpm install webpack-cli -g

说明:webpack3.0及其以上或4.0以下版本自带webpack-cli，不需要额外安装。而4.0以上二者分离,需单独安装

• 查看webpack版本号以确认成功安装

webpack -v

• 初始化

npm init -y

会在项目目录下生成一个package.json文件,里面是初始化时填写的相关信息

• 初次打包

我们在js/index.js中严格按照CommonJS将几个排序函数导出

在index2.js中引用,并将结果输出在document中

• 执行打包命令(将index2作为入口文件)

webpack js/index2.js

遇到错误提示

解决办法:指定mode

webpack js/index2.js --mode=development

会默认在dist/下生成打包好的main.js文件

同时在index.html中引用打包好的main.js,可以看到浏览器显示排序结果

在我理解webpack会自动寻找入口文件的所有引用,然后将查找到的文件“合并”成一个js文件

• 配置WebPack

在项目更目录建立一个webpack.config.js文件用于配置

module.exports = {
    mode: "development",
    entry:  __dirname + "/js/index2.js",//入口文件
    output: {
        path: __dirname + "/src",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    }
}

然后直接终端执行webpack,会自动引用webpack.config.js中的配置信息

webpack

打包后的目录结构

如果webpack不是全局安装,则执行webpack命令需要找到webpack在node_modules中的路径才可以调用,通常是

node_modules/.bin/webpack

所以可以在package.json的script部分新增一条快捷命令

这样执行npm webpack能达到同样的效果

• Loaders

安装style-loader和css-loader,前者允许你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中

cnpm install --save-dev style-loader css-loader 

在webpack.config.js中配置

module.exports = {
    ...,
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
};

在css/文件中添加一个index.css以设置样式

在入口文件中(或是真正需要用到该样式的文件中)引用改样式

• 重新打包(顺便试一下刚才自定义的npm命令)

npm run webpack 

打包成功后样式已生效

这样做css会和js打包到同一个文件中，不会打包为一个单独的css文件

• 使用webpack-dev-server实现热加载

当代码被修改,浏览器能够及时刷新

npm install --save-dev webpack-dev-server

在webpack.config.js中添加配置项

配置好服务器信息后,就可以启动服务了,为了方便,可以在package.json中添加scripts

执行

cnpm start

执行效果

已经在8081端口开启了这个服务

但是此时虽然配置了inline,修改代码后只会重新编译,而浏览器不会重新刷新,这是因为,默认情况下，webpack-dev-server检测到变化自动打包后，新打包后的文件实际上存在于内存中，而硬盘上的bundle.js依然是旧的。默认路径是项目根目录，文件名是在output配置中的filename,这时候有两种方法解决

因为webpack-dev-server对于文件请求会优先到内存中查找，没有的话再转到硬盘上

在index.html中打印一个随机值,可以看到每次修改文件后,都会重新编译,浏览器也会重新刷新,随机值发生变化

• babel

babel是用于编译es6/7等更高级js语法的工具 ,可以使得高版本js语法在编译后可以兼容低版本的浏览器

安装react、react-DOM

cnpm install --save react react-dom

随便用react写一个组件,并且挂载到dom上

安装babel-core、babel-loader

cnpm install babel-core babel-loader --save-dev

安装babel-preset-env(解析es6)、babel-preset-react(解析jsx)

cnpm install babel-preset-env babel-preset-react --save-dev

配置使用babel-loader

重新编译提示错误,意思是需要babel-core 7 以上的版本,是因为babel-loader8.0.0以后需要babel-core 7.x的支持,并且babel-core7以后,包名升级为 @babel/core

解决办法:

将babel-loader降级

将babel-core升级(安装@babel/core )

cnpm install --save-dev @babel/core 

再重新编译依旧报错

原因是babel6.x和7.x冲突

解决办法:

删除node_modules重新配置package.json,重新cnpm install

删除图中标记的包,将原来的babel-XXX全部安装成@babel/XXX

cnpm install @babel/preset-env @babel/preset-react --save-dev

此时package.json中的依赖应该是这样的

然后我们再在webpack中配置新的preset

将原来的env和react改成@babel/env和@babel/react

重新编译

编译成功,并且将那个reactButton也渲染出来了

• plugins

再进一步书写react会发现编译又出错了

需要安装解析类的插件

cnpm install --save-dev @babel/plugin-proposal-class-properties

配置pugins

参考文章

webpack官方文档

https://segmentfault.com/a/1190000006178770

https://www.jianshu.com/p/e21d19875fbb

https://www.cnblogs.com/jiebba/p/9618930.html

https://blog.csdn.net/Yagizacd/article/details/82182800

https://www.cnblogs.com/soyxiaobi/p/9554565.html