webpack打包编译学习记录

首先是webpack的安装，全局安装或者本地安装，建议项目本地安装；

---

npm install webpack -g //全局安装
npm install webpack --save-dev //本地安装

---

配置文件

• 根目录创建文件webpack.config.js
• 配置入口、出口、插件等配置项，配置package.json文件scripts项目，简单配置
• module.exports = {
entry: "./src/script/index.js",
output: {
path: __dirname + "/build/script",
filename: "[name].js"
}
}
• {
"scripts": {
"webpack": "webpack"
},
"devDependencies": {
"webpack": "^3.10.0"
}
}
• 如上配置，命令行键入nm run webpack,完成第一次的打包；在build的script目录下生成main.js文件；

---

less编译打包

• less编译打包，就需要使用强大的loaders；编译es6，json等同样需要安装所需loader
• 安装npm install --save-dev style-loader less-loader css-loader less //注：需安装四个，且是必须的。
• module.exports = {
entry: "./src/script/index.js",
output: {
path: __dirname + "/build/script",
filename: "[name].js"
},
module: {
rules: [{
test: /\.less$/,
use: extractLess.extract({
use: [{
loader: "style-loader"
}{
loader: "css-loader"
}, {
loader: "less-loader"
}]
})
}]
},
• 在入口文件index.js中import进需要编译的less文件//因为是将入口文件进行打包处理，所以必须import到入口文件中；
• 然后运行npm run webpack；完成打包，在引入了index.js文件的html页面就能正常显示样式了，此时的样式是编译后，生成了一个style的标签，样式是内联的

• 这样存在一个问题，线上的css不能被缓存，而且编译的index.js文件也会变得异常大，对于前端性能优化是很不利的，也是比较第几部成熟的做法，所以，直接打包进jindex.js；只适合在线下开发使用；所以需要进行分离编译打包：

  • 使用extract-text-webpack-plugin插件，尽心本地安装
    
    • cnpm install --save-dev extract-text-ebpack-plugin
  • 参考官网的写法，添加插件和配置内容https://webpack.js.org/loaders/less-loader/#src/components/Sidebar/Sidebar.jsx
  • 在webpack.config.js中引入
    
    • const ExtractTextPlugin = require("extract-text-webpack-plugin"); //分离css
const extractLess = new ExtractTextPlugin({
filename: "../style/[name].css",
disable: process.env.NODE_ENV === "development"
});;注意filename的路径，配置到自己目录css文件所在文件目录；

  • 修改less-loader的配置：{
test: /\.less$/,
use: extractLess.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
};

  • 添加插件

  • plugins: [
    extractLess
    ]

  ---

  npm run webpack;在 build目录下会生成一个css文件，这样就能分离并且编译less文件了；

今天就到这里，越努力越幸运