![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
webpack常用的配置
花裤衩-格子衫
这个作者很懒,什么都没留下…
展开
-
PostCss --- webpack的css处理工具
PostCss扩展支持特性(添加浏览器前缀,使用下一代CSS语法)#postcss.config.js新建其文件---配置module.exports = { plugins: [ // 需要使用的插件列表 require('postcss-cssnext') ]}// https://github.com/michael-ciniawsky/postcss-lo...原创 2020-04-14 18:54:10 · 146 阅读 · 0 评论 -
babel---webpack重要工具的使用
1.接入Babelmodule: { rules: [ { test: /\.js$/, use: ['babel-loader'], }, ] }2.设置babel的配置文件(其中plugins 需要那些插件,Presets预设新的语法特性)// a.可以使用.babelrc{ "presets": [ ...原创 2020-04-14 18:43:44 · 117 阅读 · 0 评论 -
Module---webpack处理模块的规则
1.包括3个重要的概念(test,include,exclude条件匹配;应用规则,重置顺序)module: { // 不去解析这些文件,提高构建性能 noParse: /jquery|lodash/, //不去解析jquery 和lodash的库的依赖,提高打包效率,这个属性也可以是函数 // 从 webpack 3.0.0 开始 noParse: function(content) ...原创 2020-04-14 17:01:01 · 189 阅读 · 0 评论 -
resolve---webpack配置寻找第三方模块的规则
// 优先级左到右,扩展名extensions: ['.ts','.jsx','.js','.json'];原创 2020-04-14 13:14:15 · 265 阅读 · 0 评论 -
externals---webpack之内置全局变量
externals: { // 通过script标签引入的全局变量,打包忽略。提升性能。 jquery: 'jQuery', react: 'React', 'react-dom': 'ReactDOM',}原创 2020-04-14 12:06:09 · 482 阅读 · 0 评论 -
DevServer---webpack的本地提升开发效率
inline: true, // 实时预览功能插入一个代理,代理客服端控制刷新(否则通过iframe)hot: true,// 模块热替换,从而实时预览open: true, // 运行是自动打开网页host: 127.0.0.0, // 默认是本地可以访问,可以设置其他设备访问// 只有一个html是设置true,不论什么都返回index.html,historyApiFallback...原创 2020-04-14 11:49:42 · 88 阅读 · 0 评论 -
output---webpack出口
主要属性 output: { path: path.resolve(__dirname, '../dist'), filename: '[name].[hash].js', // 单个文件直接写bundle.js publicPath: `/${appName}`, 默认"", // /mobile-learner/main.2eb1d94ecce97e67792a.j...原创 2020-04-14 10:50:03 · 84 阅读 · 0 评论