webpack打包编译学习记录
来源:互联网 发布:软件开发的发展趋势 编辑:程序博客网 时间:2024/06/05 08:03
首先是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
;注意filename的路径,配置到自己目录css文件所在文件目录;
const extractLess = new ExtractTextPlugin({
filename: "../style/[name].css",
disable: process.env.NODE_ENV === "development"
});
修改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文件了;- 使用extract-text-webpack-plugin插件,尽心本地安装
今天就到这里,越努力越幸运
阅读全文
1 0
- webpack打包编译学习记录
- vue+webpack学习记录
- webpack 学习记录
- webpack学习记录
- webpack学习记录1
- webpack 学习记录
- 让webpack打包时支持ReactJS"编译"
- linux下的webpack编译打包工程
- 【webpack】学习记录(一)
- 【webpack】学习记录 (二)
- 工具学习——webpack 项目打包
- 入门学习webpack打包工具(一)
- webpack打包
- Webpack打包
- webpack 打包
- webpack打包
- webpack打包
- 走进webpack—我的webpack学习记录(1)
- go 时间篇
- YCrCb与YPrPb的含义与区别
- 翻译:《PKCS#7
- 再谈select, iocp, epoll,kqueue及各种I/O复用机制,以及各平台的实现方案
- “Name node is in safe mode” 错误解决方法
- webpack打包编译学习记录
- Spring MVC中对于邮件的初始化,和发送邮件实例代码
- 用c++实现扫雷
- 蓝牙开发经验小结——自动文件传输(OBEX)
- kafka的使用
- 深入浅出Prim算法
- GOTURN算法在ubuntu14.04+only_cpu环境下编译运行
- linux 下新安装tomcat执行.sh文件总是提示permission denied
- Context类getString(@StringRes int resId, Object... formatArgs)的使用