wepack使用
当前使用的版本:webpack 4.5。
⚠️webpack 是需要有 node 环境的,所以在使用之前需要保证你当前安装的有 node。
安装 webpack:
npm install webpack --save-dev (dev 是指的是在开发环境中使用的依赖包)
一、入门的 webpack 配置 webpack.config.js:
module.exports = {
entry: __dirname + "/app/main.js", //压缩入口
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
}
⚠️需要注意的是:
1、__dirname 是 node 的全局变量,存储的是文件所在的目录
2、output 中的 path 是文件打包后的绝对路径,不是相对路径
3、执行命令的时候,如果 webpack 不是全局安装的,需要加上路径: node_models/.bin/webpack
直接执行,如果用的是 webpack 4,则会有一个提示说需要单独安装 webpack-cli。
因为在webpcak 3 中 webpack-cli 是集中在 webpack 中的,而在 webpack 4 为了方便管理维护,将 webpack-cli 分离了出来;所以在如果最初没有安装 webpack-cli 的时候,执行 webpack 命令会有提示说让用户安装 webpack-cli。
4、还有一种执行方法是 webpack 入口文件路径 打包后输出的文件路径
二、快捷执行打包任务:
package.json 添加如下内容:
"script" : {
"start": 'webpack' //无论是不是全局安装的webpack,都可以不用写 node_module/.bin/ 这个路径,npm 能自己找到
}
然后就可以使用 npm start 来代替上面的 node_module/.bin/webpack 这个繁琐的命令了
⚠️start (test也是)是个特殊的命令,通过 npm start 就可以找到对应的命令进行执行,如果不是 start 命令则需要使用:npm run scriptName
"scripts": {
"error": "echo \"Error: no test specified\" && exit 1"
}
test 命令需要这样执行: npm run error
他的执行结果就是输出一个错误:
三、source maps的设置,devtool选项
1、source-map 单独文件生成,功能完整,但是打包速度过慢
2、cheap-module-source-map 单独文件生成,不带映射,只能对应行,不能对应列,不便调试
3、eval-source-map 在同一个文件中生成干净完整的source-map,但是有完全问题;开发阶段首选
4、cheap-module-eval-source-map 速度最快,没有映射,缺点同3
使用,在wapack的配置中添加 devtool 即可:
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
四、浏览器监听代码修改,并自动刷新---webpack服务器:webpack-dev-server
安装该插件:npm install webpack-dev-server --save-dev
devServer 配置:
1、contentBase:服务器从哪里获取内容。默认为根目录,如果是其他目录的话,进行修改即可,建议使用绝对路径;可以从多个目录获取,用数组即可
2、port:监听哪个端口的请求,默认为 8080
3、inline:为 true 时则会进行热替换
4、historyApiFallback:使用 HTML5 History Api 时使用,如果设置为 true 则表示不跳转
使用:
module.exports = {
devtool: 'eval-source-map', entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}, devServer: {
contentBase: path.join(__dirname, "public"),//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
同时需要在 package.json 的 scripts 对象中添加
"scripts": {
"server": "webpack-dev-server --open"
}
执行 npm run server 命令就可以看到效果,这时修改文件,页面内容实时更新则说明配置成功
五:Loader
1、用于对模块的源代码进行转换
2、可以使你在 import
或"加载"模块时预处理文件
3、可以将文件从不同的语言(如 TypeScript)转换为 JavaScript
4、将内联图像转换为 data URL
5、他甚至允许你直接在 JavaScript 模块中 import
CSS文件
如果要使用 loader 则需要安装对应的 loader
npm install css-loader --save-dev 告诉 webpack 加载 css
npm install js-loader --save-dev 将 TypeScript 转化成 js
然后在 webpack.config.js 中配置 module 对象
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' }, // 给每个 css 文件使用 css-loader
{ test: /\.ts$/, use: 'ts-loader' } // 给每个 ts 文件使用 ts-loader
]
}
};
最新文章
- springmvc中的controller是单例的
- The server encountered an internal error that prevented it from fulfilling this request.
- viewgroup用addview添加的view不显示问题
- 聚类算法kmeans
- ios8 新增的 showViewController 和 showDetailViewController
- 初学画布canvas的chapter2
- SELECT INTO FROM 与 INSERT INTO SELECT区别鉴赏
- Failed to connect to remote VM. Connection refused. Connection refused: connect.
- IIS6的session丢失问题
- Android手机出现";已安装了存在签名冲突的同名数据包";的原因及解决办法
- [CSS]列表属性(List)
- css3:border-radius圆角边框详解 (变圆 图片)
- Oracle Hints详细解释
- ftp_get_file_and_directory
- 去除IE10自带的清除按钮
- 使用VLC Activex插件做网页版视频播放器
- phpstudy-5.6.27-nts 安装redis扩展
- PL/SQL简单使用——导入、导出数据表
- linux 进程间同步互斥
- sqlyog通过跳板机ssh连接mysql数据库
热门文章
- Java Servlet DAO实践(二)
- nginx--提供一键安装脚本
- pyhon模块
- CAD得到所有组名(网页版)
- js读写txt文件
- eclipse配置Tomcat服务器server locations的方法
- (转)Oracle数据库DBA必备基本技能
- java.net.MalformedURLException: no protocol: www.baidu.com
- 数据结构与算法(3)- C++ STL与java se中的vector
- 树状数组 &; lowbit()