webpack常见的配置总结 ---只是一些常见的配置

2018-06-24 00:09:27来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

早期的构建工具grunt ,gulp 

帮助我们配置一些开发环境,省去一些我们调试和重复的工作

现在我们的构建工具一般是webpack ,目前建议大家用3.0以上的版本

现在市场上比较优秀的构建工具,个人认为有2个(大神有不同意的请不要喷我??)

1-webpack

2-fls3

  fls3是百度提供的前端构建工具,文档都是中文的,很方便入手,由于我使用vue习惯了

脚手架依赖webpack,所以个人一直使用webpack

 

 

webpack 是一个打包工具(常见的打包)

 打包-------将所以的文件打包成一个(通俗话??)

使用webpack

 

- 安装
- 如果安装全局,可能会导致版本的差异,都安装到项目开发依赖中
,可以使每个人的版本统一

 

npm install webpack --save-dev

 

- 在package.json中配置脚本

 

scripts:{
"build":"webpack"
}

 

- 执行webpack

 

npm run build

 

- 在当前目录下新建一个webpack.config.js
- 名字一定是webpack.config.js,不能错,不能更改
- webpack是基于node语法

 //引进一个node核心模块path
    let path=require('path');
    module.exports={
        //打包的入口
        entry:"./src/main.js",
        //打包出口
        output:{
            filename:"bundle.js",//打包后的文件名
            //path必须是绝对路径
            //path.resolve将相对路径转绝对路径
            path:path.resolve('./dist') //打包后文件的路径
        }
    }

解析es6语法

- babel-core是babel的核心包,使用babel必须安装
- babel-loade是babel的翻译官,但是他没有语法
- 配置转换es5语法必须要让babel的翻译官有语法 babel-preset-es2015

安装上面的es6解析的包

npm install babel-core babel-loader babel-preset-es2015 --save-dev

配置模块部分转换es5语法

- 在当前目录下新建一个.babelrc文件

{
"presets": ["es2015"]
}

- 第二步在webpack.config.js中增加一个modlue配置
- 在modlue模块规则rules里配置一条js规则

 

 

 

//模块配置
        module:{
            //给模块配置规则
            rules:[
                {
                    //匹配js,使用babel-loade,但不管node_modules目录下面的
                    //如果用到babel-loader,需要配置babelrc
                    test:/|.js$/,use:'babel-loader',
                    exclude:/node_modules/
                }
            ]
        }

 

解析es7语法

- es2015 stage-3 stage-2 stage-1 stage-0(最高级)


- 先按照依赖包

npm install babel-preset-stage-0 --save-dev

- 在.babelrc文件下增加一个stage-0

{
"presets": ["es2015","stage-0"]
}

解析css 将css看成一个模块

npm install css-loader style-loader --save-dev

- 在webpack.config.js中模块module中规则rules里面增加一个css解析配置

{
//将css文件匹配到先解析css 再将css插入到style中,写法从右往左写
test:/\.css$/,use:['style-loader','css-loader'],
exclude:/node_modules/
}

解析less文件

npm install less less-loader --save-dev

- 在webpack.config.js中模块module中规则rules里面增加一个less配置

     {
           //将css文件匹配到先解析css 再将css插入到style中,写法从右往左写
           test:/\.less$/,
           //包依赖
           use:['style-loader','css-loader','less-loader'],
           exclude:/node_modules/
    }

解析图片 一般8k以下才解析base64

- 如果使用js引入图片,默认不会进行打包文件
- 如果是背景图片他会去打包
- 在js引用文件,要import 引入图片
- import img from './1.jpg'

npm install file-loader url-loader --save-dev

- 在webpack.config.js中模块module中规则rules里面增加一个图片配置

 

    {
        //将css文件匹配到先解析css 再将css插入到style中,写法从右往左写
        test:/\.(png|jpg|gif|woff|svg|eot|woff2|ttf)$/,
        //包依赖 限制8K以上直接输出文件,以下的base64
        // 8*1024 多少字节
        use:'url-loader?limit=8192',
        exclude:/node_modules/
    }

打包html以src下的html作为模板,将打包后的文件引入

npm install html-webpack-plugin --save-dev

 

npm run build

- 会执行输出实体文件,项目大时候,速度很慢
- 上线时候才npm run build

npm run dev

- 一般我们会在本地跑一个服务,当文件变化,刷新浏览器

npm install webpack-dev-server --save-dev

- 配置webpack里面的dev命令

"scripts": {
"dev":"webpack-dev-server --open"
},

webpack 基础包总结

 npm install webpack babel-core babel-loader babel-preset-es2015
    babel-preset-stage-0 css-loader style-loader less-loader
    sass-loader less stylus-loader file-loader url-loader html-webpack-plugin 
    webpack-dev-server --save-dev

 

总结就是安装各种各样的包,基础配置没有什么麻烦,后期也有脚手架,但是基础配置还是要知道一些

 

如果文章有帮助到您,请点右侧的推荐关注哈,O(∩_∩)O谢谢~ >>>>

谢谢大家 ??

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:跨浏览器事件兼容,巧妙处理方法

下一篇:SVG坐标系统及图形变换