-
使用babel是为了把es6转换成浏览器可以执行的代码查看全部
-
module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname,"dist"), filename: 'js/[name].bundle.js' }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: path.resolve(__dirname, "node_modules"), include: path.resolve(__dirname, "src"), options: { presets: ['env'] //转码es6,es7,es5等，为浏览器可识别的js } }, { test: /\.css$/, exclude: path.resolve(__dirname, "node_modules"), //指定解析时略过哪些文件,可以缩小打包时间 include: path.resolve(__dirname, "src"), //指定解析哪些文件 use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 //执行后边的插件应用 } }, { loader: 'postcss-loader', options: { plugins: [ require('postcss-import')(), //添加引用@import的编译 require('autoprefixer')({ //自动添加css前缀 browsers:['last 5 versions'] //CSS浏览器兼容 }) ] } } ] } ] } }查看全部
-
webpack 3.x： 安装：npm i babel-loader babel-core babel-preset-env -D webpack.config.js： module: { rules: [{ test: /\.js$/, //失败-__dirname+"/src"会导致es6转码失败 // exclude: __dirname + "/node_modules", // include: __dirname + "/src", //失败 // include: /src/, //成功 //失败-path.resolve中第二个参数前不能加"/" // exclude: path.resolve(__dirname, "/node_modules"), // include: [ // path.resolve(__dirname, "/src") // ], //三种方法速度无差异 //成功-RegExp exclude: /(node_modules|bower_components)/, include: /src/, //成功-path.resolve // exclude: path.resolve(__dirname, "node_modules"), // include: [ // path.resolve(__dirname, "src") // ], //成功-combine // exclude: /(node_modules|bower_components)/, // include: [ // path.resolve(__dirname, "src") // ], use: [{ loader: "babel-loader", options: { presets: ["env"] } }] }] }查看全部
-
{ test: /\.less$/, use: [ "style-loader", "css-loader", { loader:'postcss-loader', options:{ plugins:function(){ return [ require('postcss-import')(), require('autoprefixer')({ browsers: ['last 5 versions'] }) ] } } }, {loader:"less-loader"} ], }查看全部
-
js引入css文件 css-loader 处理css文件 styles-loader 使页面加上style样式 require('styles-loader!css-loader!./styles.css')查看全部
-
1.安装方法 npm install babel-loader babel-core babel-preset-env webpack --save-dev 2.所以后面的参数'由presets: ['latest']相对于的变成了presets: ['env'] 3.官方并没有废弃query 也没有指明options是新参数 实际测试两种方法都可以 生成结果也一模一样 4.loader: 'babel-loader'才能被识别 5.include和exclude需要相对路径，所以include:__dirname +'./src/' 加前缀__dirname查看全部
-
--display-reasons //打包原因查看全部
-
--progress -dispaly-modules //列出打包模块查看全部
-
--progress //查看打包过程查看全部
-
--watch //文件更新时自动打包查看全部
-
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' //绑定css的loader查看全部
-
webpack -g //查看webpack命令查看全部
-
//webpack2.0 解决style-loader!css-loader!post-loader问题,并解决css中@import的问题： { test:/\.css$/, use:[ 'style-loader', {loader:'css-loader',options:{importLoaders:1}}, { loader:'postcss-loader', options:{ plugins:function(){ return [ require('postcss-import')(), //一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效 require("autoprefixer")({browsers:['last 5 versions']}) ] } } } ] }查看全部
-
2.5.1官网最新文档总结： 1.安装方法 npm install babel-loader babel-core babel-preset-env webpack --save-dev 2.所以后面的参数'由presets: ['latest']相对于的变成了presets: ['env'] 3.官方并没有废弃query 也没有指明options是新参数 实际测试两种方法都可以 生成结果也一模一样 4.loader: 'babel-loader'才能被识别 5.include和exclude需要相对路径，所以include:__dirname +'./src/' 加前缀__dirname查看全部
-
一、babel 1、babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码 2、安装babel 终端目标文件夹输入：npm install --save-dev babel-loader babel-core 3、loader:'babel-loader'可以正常运行，视频中的loader:'babel'不能正常运行。 4、babel的loader是一个非常耗时的转换。 改善之前的时间是8260ms 二、query: ['kwɪərɪ]查询 presets:[priː'sets] 三、安装plugin的latest 终端目标文件输入：npm install --save-dev babel-preset-latest 四、改善： （1）webpack 的api的configuration loaders的参数5个：test,exclude,include,loader,loaders （2）改善方法：exclude,include参数 例如：exclude:'./node_modules/',//node_modules是已经引用过的，已经打包过的文件，其实这里对速度没有影响，这是告诉你如果是不相关的文件，可以用exclude include:'./src/', 1）会报错：-configuration.module.loaders[0].exclude: The provided value "./node_modules/" is not an absolute path! 2）报错的解决方法： exclude:__dirname+'/node_modules/',//已经引用过的，已经打包过的文件 include:__dirname+'/src/', （3）这样初步改善后时间是1210ms 五、给loader指定参数presets 1、直接Loader后跟问号 require('url-loader?mimetype=images/png!./file.png'); 2、配置文件中跟问号 3、配置文件中用query 4、项目根目录建立babelrc配置文件，配置文件中一个对象，对象中参数为presets. 5、config.js中指定babel，babel指定presets.查看全部
举报
0/150
提交
取消