webpack 4 入坑及爬坑记录
一、安装
在本机安装好nodejs的基础上，window操作系统，cmd打开控制台，添加到创建的文件夹下
npm init //初始化npm
npm install webpack --save-dev
正常等待安装完成，安装完成可能会出现一些警告
新建项目，编辑css,js,html，运行webpack,会提示安装webpack-cli,安装完成之后，可能会一直报错
暴力解决方法：
删除原先安装的，不管是全局还是局部安装的，都删掉
npm install webpack webpack-cli --save-dev
执行，运行
npx webpack
二、配置
在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，所以可以新建配置文件，便于操作
新建配置文件
webpack.config.js
const path = require('path');
module.exports = {
mode: 'production', //指明开发坏境是生产者模式还是开发模式，不写的话，运行有一堆警告，看着尴尬癌要出来
entry: { //入口
app: './src/demo.js',
com: './src/js/com.js' //简而言之，要打包压缩的那个js的路径；多个入口使用方法添加占位符
},
devtool: 'inline-source-map', //指定资源
output: { //出口，输入的
filename: 'js/[name].min.js', //名称位置
path: path.resolve(__dirname, 'dist'), //输出的路径，
//publicPath: 'http://cdn....'指定绝对路径地址
}
}
基本的配置，应该就是这样，执行npx webpack --config webpack.config.js就会得到想要的结果，打包之后的js生成在dist/js目录里
注意一下：path: path.resolve(__dirname, 'dist'), //输出的路径，我看API上必须是要绝对路径，通过path.resolve来自动解析路径就可以的，详情请戳这里https://www.webpackjs.com/configuration/resolve/
可以同时修改npm的package.json文件
{
"name": "webpackdemo",
"version": "4.14.0",
"description": "webpack test",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js --colors", //这里这里可以添加webpack的各种参数，我只加了两个config color
"watch": "webpack --watch" //自动打包
},
保存，就可以直接运行 npm run webpack
还有这些参数，都可以添加进去
--watch //监听自动打包
--config //指定配置 指定文件名
-p //压缩混淆脚本，这个非常非常重要！
-d //生成map映射文件，告知哪些模块被最终打包到哪里了其中的
--progress //显示进度条
--color //添加颜色
三、插件
1、loader 允许你直接在 JavaScript 模块中 import CSS文件！//将css一起和js打包在一起
npm install css-loader style-loader --save-dev
npm run webpack
有三种方法使用：
（1)、还是在webpack.config.js里面配置
// module: { // rules: [ // { // test: /\.css$/, 正则表达式判断是否是后缀名为css // use: [ // { loader: 'style-loader' }, 打包之后插入到style中 // { // loader: 'css-loader', // options: { // modules: false 是否打包成具有唯一hash值的css，最好设置为false，不然写的类名虽然保证了唯一性但是不方便调用 // } // } // ] // } // ] // }
(2)、直接在导入的import中使用
(3)、cmd控制台中直接
webpack --module-bind 'css=style-loader!css-loader'最后都会打包出来css在html页面的style中
2、HtmlWebpackPlugin //打包后自动生成对应的html文件
npm install html-webpack-plugin --save-dev
配置webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
main: './src/js/main.js',
com: './src/js/com.js'
},
devtool: 'inline-source-map',
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', //在膜版基础上
filename: 'out-index.html', //模板名称
//inject: 'head/标签名称', //嵌入到html哪个标签里面
//data: new Date(), //插入时间
//minify:{},压缩html文件
title: 'Output html', //插入生成html的title
// chunks:['demo']指定包含的js模块
})
],
output: {
filename: 'js/[name].min.js',
path: path.resolve(__dirname, 'dist')
}
}
最后生成out-index.html在dist文件夹下，还有更多参数及插件，请戳https://www.npmjs.com/package/html-webpack-plugin
3、MiniCssExtractPlugin //单独打包分离出css，针对webpack4+的插件，反正我试了无数种方法，就这个插件可以，还有extract-text-webpack-plugin@next版本据说也阔以，可是我没有弄出来
npm install mini-css-extract-plugin --save-dev
同样配置webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'production',
entry: {
main: './src/js/main.js',
com: './src/js/com.js',
common: './src/css/common.css'
},
devtool: 'inline-source-map',
plugins: [
new MiniCssExtractPlugin({
filename: 'common.min.css'
})
],
output: {
filename: 'js/[name].min.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader"
]
}
]
}
}
输出common.min.css在dist文件夹下。暂时记录如此，后续更进
