1.npm install webpack --save-dev
2.安装加载器
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev //es6转码规则
npm install style-loader --save-dev
npm install css-loader --save-dev
npm install less --save-dev
npm install less-loader --save-dev //样式加载器
npm install extract-text-webpack-plugin --save-dev //分离css
3.配置webpack.config.js
var webpack=require("webpack");
var ExtractTextPlugin=require("extract-text-webpack-plugin"); // 分离css
var path=require("path");
var fs=require("fs");
function getEntry(){
var jsPath="./src/js/";
var dirs=fs.readdirSync(jsPath);
var matchs=[], files={};
dirs.forEach(function (item) {
matchs=item.match(/(.+)\.js$/);
if (matchs){
files[matchs[1]]=path.resolve(jsPath,item);
}
});
return files;
};
module.exports = {
// 入口文件位置
entry:getEntry(),
// 输出文件位置
output:{
path:"./dist/",
publicPath:"./dist/",
filename:"[name].js"
},
module:{
// require加载时编译
loaders:[
{ test:/\.js$/, exclude:/node_modules/, loaders:["babel-loader"] },
{ test:/\.less$/, loader:ExtractTextPlugin.extract("style-loader","css-loader!less-loader") }
]
},
resolve:{
extensions:["",".coffee",".js"],
// 配置别名，方便require
alias:{
asset:__dirname+"/asset/",
/*jquery:__dirname+"/asset/js/jquery-1.12.2.min.js",
bootstrap:__dirname+"/asset/bootstrap/",
bootstrapTable:__dirname+"/asset/bootstrap-table/",*/
}
},
// 外部文件形式
externals:{
jquery:'window.jQuery'
},
plugins:[
// 提供全局变量，无须require载入
new webpack.ProvidePlugin({
jQuery:"jquery",
$:"jquery"
}),
// 自动抽离公共代码
new webpack.optimize.CommonsChunkPlugin('common.js'),
// 分离css
new ExtractTextPlugin("[name].css"),
/*// 压缩js文件
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
})*/
]
};
4.配置.babelrc
{
"presets":["es2015"]
}
5.编译webpack --display-error-details
6.生成测试文件
var fs=require("fs");
var path=require("path");
var jsPath="./src/",testPath="./test/",demo="test.html";
function createTestFile(source,target){
var dirs=fs.readdirSync(source);
dirs.forEach(function(item){
var stat=fs.statSync(path.join(source,item));
if ( stat.isDirectory() ){
if ( !fs.existsSync(path.join(target,item)) ){
fs.mkdirSync(path.join(target,item));
};
createTestFile(path.join(source,item),path.join(target,item));
}else{
var file=item.slice(0,item.indexOf("."));
var suffix=item.slice(item.indexOf(".")+1);
if ( !path.join(target,file+".html") ){
var html=fs.readFileSync(path.join(testPath,demo),"utf8");
fs.writeFileSync(path.join(target,file+".html"),html, {encoding:"utf8"});
};
};
});
};
createTestFile(jsPath,testPath);
7.测试文件demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.11.0.css"/>
<script src="http://code.jquery.com/qunit/qunit-1.11.0.js"></script>
<script src="../dist/common.js" type="text/javascript"></script>
<script src="../dist/index.js" type="text/javascript"></script>
</head>
<body>
<h1 id="qunit-header">QUnit测试</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">测试标记</div>
</body>
<script type="text/javascript">
var a;
module("sum",{
// 在每个测试之前运行
setup: function(){
a=23;
},
// 在每个测试之后运行
teardown: function(){
}
});
test("sum", function(){
equal( sum(a,2), 4, "匹配" );
});
/*// 异步测试1
test("async", function() {
stop();// 终止qunit测试
$.getJSON("resource", function(result) {
deepEqual(result, {
status: "ok"
});
start();
});
});
// 异步测试2
asyncTest("async2", function() {
expect(1);// 判断1次
$.getJSON("resource", function(result) {
deepEqual(result, {
status: "ok"
});
start();
});
});
// 测试抛出错误，raises第二个参数为正则或构造函数，判断错误是否构造函数的实例
test("raises", function() {
function CustomError() {}
raises(function() {
throw new CustomError();
}, CustomError, "must throw error to pass");
});
// 添加测试方法
function domEqual( selector, modifier, message ) {
var attributes = ["class", "role", "id", "tabIndex", "aria-activedescendant"];
function extract(value) {
var result = {};
result.nodeName = value[0].nodeName;
$.each(attributes, function(index, attr) {
result[attr] = value.attr(attr);
});
result.children = [];
var children = value.children();
if (children.length) {
children.each(function() {
result.children.push(extract($(this)));
});
} else {
result.text = value.text();
}
return result;
}
var expected = extract($(selector));
modifier($(selector));
var actual = extract($(selector));
QUnit.push( QUnit.equiv(actual, expected), actual, expected, message );
}*/
</script>
</html>
备注：
被依赖的模块不能作为entry中的配置项
与gulp相结合
1.npm install gulp --save-dev
2.npm install webpack-stream --save-dev //gulp-webpack插件
3.配置gulpfile.js
var gulp=require("gulp");
var webpack=require("webpack");// 模块化加载
var webpackConfig=require("./webpack.config.js");// webpack配置文件
var less=require("gulp-less");// 编译less
var minifycss=require("gulp-clean-css");// 压缩css
var watch=require("gulp-watch");// 通过监听实时启动gulp任务
var rename=require("gulp-rename");// 文件重命名
var notify=require("gulp-notify");// 控制台打印工具
var dash="\n\n--------------------------------\n\n";
var paths={
scripts:"src/js/*.js",
less:"src/css/*.less"
}
gulp.task("webpack",function(callback){
var myConfig=Object.create(webpackConfig);
webpack(myConfig,function(err,stats){
callback();
});
});
gulp.task("less",function(){
gulp.src("src/css/*.less")
.pipe( less() )
.pipe( gulp.dest("public/dist/css") )// 输出未压缩文件
.pipe( minifycss() )
.pipe( rename( {suffix:'.min'} ) )
.pipe( gulp.dest("public/dist/css") )
.pipe( notify({ message:"Compile less file successfully."}) );// 输出压缩文件
});
gulp.task("server",function(){
require("./app.js");
console.log(dash+"KOA server is running at http://127.0.0.1:3005/."+dash)
});
gulp.task("watch",function(){
gulp.watch(paths.less,["less","server"]);
gulp.watch(paths.scripts,["webpack","server"]);
})
gulp.task("default",["webpack","less","server","watch"]);
4.webpack.config.js同单独使用webpack时
相关推荐
在"webpack使用Vue学习案例"中，我们将深入理解如何将这两个强大的工具结合，以构建高效的前端项目。 首先，让我们了解Webpack的基础。Webpack 将应用程序视为由多个模块组成，这些模块可以是 JavaScript 文件、CSS...
webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例webpack使用ParallelUglifyPlugin实例
webpack使用方法说明
3. **使用 terser-webpack-plugin**：Webpack 4及以上版本默认使用 terser 插件进行代码压缩，这个插件支持Tree Shaking。确保配置正确，以便在压缩阶段进行未使用代码的消除。 `.babelrc`文件用于配置Babel，Babel...
要使用 `webpack-dev-server`，首先需要安装它作为项目的开发依赖： ```bash npm install --save-dev webpack-dev-server ``` 然后，在 `webpack.config.js` 配置文件中添加 `devServer` 配置项： ```javascript ...
`DllPlugin`是Webpack提供的一种优化技巧，用于预先构建常被使用的库或模块，以提高项目的构建速度。 `webpack_dll.config.js`是配置DllPlugin的文件，它定义了哪些模块会被打包到一个单独的DLL（动态链接库）中。...
在中级到高级的Webpack使用中，我们将涉及以下知识点： 1. **代码分割（Code Splitting）**：通过动态导入或配置 `splitChunks`，将大型应用的不同部分拆分成多个小块，按需加载，提高页面性能。 2. **Tree ...
帮助前端程序实现模块的依赖打包，压缩代码，优化代码；主要运用于前端框架，比如vue，react等。优点代码压缩，代码合并，使用精灵图减少请求次数，减少cookie的发送，css前置、js后置，使用浏览器缓存静态资源
这个文件较为详细的描述了webpack的使用方法以及配合vue的使用，总结不易，希望能帮助到需要的人。
使用前提：项目中安装了Webpack使用步骤： 步骤一、在项目的根目录下输入cnpm i html-webpack-plugin -D 将html-webpack-plugin插件安装到开发依赖 其作用是根据指定的模板页面在内存中生成相应的HTML页面 步骤二、...
4. **配置文件**：Webpack 使用 `webpack.config.js` 文件来配置其行为。这里可以定义入口(entry)、输出(output)、模块规则(module rules)、插件(plugins)等。在提供的文件列表中，没有这个文件，但通常会在项目根...
通过使用各种 loader，Webpack 能够处理多种类型的资源，包括但不限于 CommonJS、AMD、ES6 模块、CSS、图片、JSON、CoffeeScript 和 LESS。 #### Webpack 的核心概念 - **入口起点（Entry Points）**：定义了一个...
Webpack是一个当前非常流行的前端资源模块化管理和打包...从Webpack的基本使用到高级配置，再到最佳实践，开发者可以通过阅读官方文档、参加社区讨论、阅读开源项目代码等方式，不断提高自己使用Webpack的技能水平。
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它在开发环境中将各种资源如JavaScript、CSS、图片等视为“模块”，并将...同时，结合博客文章，我们可以获取更多关于Webpack使用的理论知识和实践技巧。
其四、Webpack 使用 vue-loader 打包 vue 文件，浏览器成功打开 .js 和 .vue 文件; 其五、其它 loader的用法(如：打包图片、打包 CSS 文件、打包 stylus 文件); 其六、使用 html-webpack-plugin、clean-webpack-...
**标题解析：** "reactive-meli:Webpack 使用演示应用程序" 指示这是一个使用 Webpack 的项目，目的是展示如何在实际应用中配置和利用 Webpack。"reactive-meli" 可能是项目的名字，暗示它可能与响应式设计或者实时...
Webpack 支持使用`import()`表达式进行异步加载模块，这在优化代码体积和提高加载速度方面非常有效。动态导入的模块将被打包成单独的chunk，只有在需要时才会被加载。 最后，Webpack 提供的热模块替换(HMR, Hot ...
这个过程中，Webpack 使用loaders（加载器）对不同类型的文件进行预处理，而plugins（插件）则可以执行更复杂的任务，如优化、打包和生成额外的文件。 针对CSS的处理，Webpack 提供了`style-loader`和`css-loader`...
在这个主题中，我们将深入探讨如何利用Webpack插件来检测未使用的文件以及在已使用的文件中查找未使用的导出。 首先，Webpack 插件是扩展Webpack功能的关键组成部分，它们通过在Webpack构建生命周期中的不同阶段...
3. **加载器（Loaders）**：Webpack 使用加载器来处理不同类型的文件，如Babel Loader用于转换ES6语法，Vue Loader用于解析Vue组件。 4. **插件（Plugins）**：Webpack 插件可以扩展其功能，如UglifyJSPlugin用于...